<template>
    <div class="goods-container">
        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>商品管理</el-breadcrumb-item>
          <el-breadcrumb-item>商品列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- :gutter=>栅格间隔 -->
        <el-row :gutter='20'>
          <el-col :span='9'>
            <el-input placeholder="请输入内容" v-model="queryGoodInfo.query" class="input-with-select" clearable
              @clear='getGoodsList'>
              <el-button slot="append" icon="el-icon-search" @click='serach'></el-button>
            </el-input>
          </el-col>
          <el-col :span='4'>
            <el-button type='primary' @click='gotoAdd'>添加商品</el-button>
          </el-col>
        </el-row>
        <!-- 卡片视图 -->
        <el-card>
            <!-- 商品列表 -->
            <el-table :data='goodList' border stripe>
            <!-- 索引列 -->
              <el-table-column type='index'></el-table-column>
              <el-table-column label='商品名称' prop='goods_name'></el-table-column>
              <el-table-column label='商品价格' prop='goods_price'></el-table-column>
              <el-table-column label='商品重量' prop='goods_weight'></el-table-column>
              <el-table-column label='创建时间'>
                <template slot-scope='scope'>
                  {{ scope.row.add_time | dateFilter}}
                </template>
              </el-table-column>
              <el-table-column label='操作'>
                <template slot-scope='scope'>
                  <!-- 编辑 -->
                  <el-button type="primary" icon="el-icon-edit" size='mini'>编辑</el-button>
                  <!-- 删除按钮 -->
                  <el-button type="danger" icon="el-icon-delete" size='mini' @click='delPro(scope.row.goods_id)'>删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页组件 -->
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="queryGoodInfo.pagenum" :page-sizes="[2, 3, 5, 10]" :page-size="queryGoodInfo.pagesize"
                    layout="total, sizes, prev, pager, next, jumper" :total="queryGoodInfo.total">
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
  data () {
    return {
      // 商品列表
      goodList: [],
      // 获取商品列表的参数对象
      queryGoodInfo: {
        query: '',
        // 当前页码 默认请求第一页
        pagenum: 1,
        // 每页显示条数
        pagesize: 10
      },
      // 商品总数
      total: 0
    }
  },
  created () {
    this.getGoodsList()
  },
  methods: {
    // 获取全部商品列表
    async getGoodsList () {
      const { data: res } = await this.$http.get('goods', { params: this.queryGoodInfo })
      console.log(res)
      if (res.meta.status !== 200) return this.$message.error('获取商品列表信息失败')
      this.goodList = res.data.goods
      this.total = res.total
    },
    // 搜索功能
    serach () {
      this.queryGoodInfo.pagenum = 1
      this.getGoodsList()
    },
    // 添加商品组件
    gotoAdd () {
      this.$router.push('/goods-add')
    },
    // 处理页码值改变
    handleSizeChange (newSize) {
      this.queryGoodInfo.pagesize = newSize
      this.getGoodsList()
    },
    // 监听页码值得改变事件
    handleCurrentChange (newPage) {
      this.queryGoodInfo.pagenum = newPage
      this.getGoodsList()
    },
    // 删除商品功能
    async delPro (id) {
      const resConfirm = await this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (resConfirm === 'confirm') {
        const { data: res } = await this.$http.delete(`goods/${id}`)
        if (res.meta.status !== 200) return this.$message.error('删除商品失败')
        this.$message.success('删除商品成功')
        this.getGoodsList()
      } else {
        this.$message.info('已取消删除操作')
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .el-card{
      margin-top: 12px;
  }
</style>
